/*
 react、react-router、redux、react-redux、redux-thunk、redux-logger 示例
 */
import React from 'react'
import ReactDOM from "react-dom"
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import {applyMiddleware,createStore,compose} from 'redux'
import {Provider} from 'react-redux'
import thunk from 'redux-thunk'
import {createLogger} from 'redux-logger'

/***************   redux  *********************/

const ADD='add'
const DELETE='delete'

function addItem(text){
    return {
        type:ADD,
        text
    }
}

function appReducers(state={},action){
    switch (action.type){
        case ADD:
            return Object.assign({},state)
        case DELETE:
            return Object.assign({},state)
        default:
            state
    }
}

const logger = createLogger();
const enhancer = compose(applyMiddleware(thunk,logger))

let store = createStore(
    appReducers,
    enhancer
)
store.dispatch(addItem('test'))
/***************   end redux  *********************/

const About = ()=>(
    <div><h2>About</h2></div>
)
const Home = ()=>(
    <div><h2>Home</h2></div>
)

const App = ()=>(
    <Provider store={store}>
    <Router>
        <div>
            <div>welcome !</div>
            <ul>
                <li><Link to='/home'>home</Link></li>
                <li><Link to='/about'>about</Link></li>
            </ul>
            <Route exact path='/' component={Home}></Route>
            <Route path='/home' component={Home}></Route>
            <Route path='/about' component={About}></Route>
        </div>
    </Router>
    </Provider>
)



ReactDOM.render(
    <App/>,
    document.getElementById('root')
);